<template>
  <el-dialog
    title="请选择日期段"
    :visible.sync="dialogVisible"
    width="350px">
    <div>
      <div>
        开始时间:
        <el-date-picker
          style="width: 50%;"
          v-model="startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始时间">
        </el-date-picker>
      </div>

      <div style="padding-top: 10px;">
        结束时间:
        <el-date-picker
          style="width: 50%;"
          v-model="endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束时间">
        </el-date-picker>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: 'ChooseDateTimeDialog',
  data: function () {
    return {
      callback:null,
      dialogVisible:false,
      startTime:'',
      endTime:'',
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('ChooseDateTimeDialogCallBus', function (callback,dateTime) {
      $this.dialogVisible = true
      $this.callback=callback
      if (dateTime){
        var split = dateTime.split(',')
        $this.startTime=split[0]
        $this.endTime=split[1]
      }
      $this.$forceUpdate()
    })

  },
  methods: {
    confirm:function () {
      if (typeof this.callback==='function'){
        var time=''
        if (this.startTime || this.endTime){
          time=this.startTime+','+this.endTime
        }
        this.callback(time)
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style scoped>

</style>
